<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>meteoCAL</title>
        <style>@import url(resources/css/index_theme.css)</style>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit styleClass="topLayout" position="north" size="250" resizable="true">
                <div align="center">
                    <img height="230px" src="resources/images/titolo90.png" alt="" align="center"/>
                </div>
            </p:layoutUnit>

            <p:layoutUnit styleClass="centralBlock" position="center">
                <table width="90%" align="center">
                    <tr>
                        <td colspan="3">
                            <div id="descriptionDiv" align="center" padding="10px">
                                <b>MeteoCal</b> is a simple web calendar that allows you to manage your events with respect to the weather forecast about the dates you plan your activities.
                                It provides forecasts for you and gives you advices if their not good. 
                                <br/>
                                <b>JOIN THE PLATFORM!</b>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">&nbsp;</td>
                        <td width="40%" align="center">
                            <br/>
                            <h:form style="border: 3px #000000;">
                                <p:growl id="growl" autoUpdate="true" showDetail="false"/>
                                <p:panel styleClass="panelForm" header="Login Form">
                                    <p:panelGrid columns="2">
                                        <p:outputLabel for="usernameInput" value="Email"/>
                                        <p:inputText styleClass="inputTextStyle" id="usernameInput" value="#{loginBean.email}" 
                                                     required="true" requiredMessage="Email required!" />
                                        <p:outputLabel for="passwordInput" value="Password"/>
                                        <p:password styleClass="inputTextStyle" id="passwordInput" value="#{loginBean.password}" 
                                                    required="true" requiredMessage="Password required!" />
                                        <p:commandButton value="Login" 
                                                         action="#{loginBean.login()}" update="growl" />
                                    </p:panelGrid>
                                </p:panel>
                            </h:form>
                            or <h:link outcome="registration" value="Register"/>
                        </td>
                        <td width="30%">&nbsp;</td>
                    </tr>
                </table>

            </p:layoutUnit>
        </p:layout>
    </h:body>   
</html>

